<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		     body{margin:0px 0px 0px -300px}
		     *{margin: 0px;padding: 0px;}
			.cont {width: 1680px;position:relative;}
			
			.line{height: 1800px; width: 57px; background-image: url(img/line.jpg); position: absolute;left: 400px;}
			
			#title {background-image: url(img/coll.jpg); width: 412px;height: 128px;background-size: cover;position: relative;left: 300px;animation-play-state: 50px;}	
			
			#clear{position: absolute; float:right; width: 100px;height: 40px;border-radius: 10px;text-align: center;
			border: solid 1px dodgerblue;left: 1200px;top: 100px;line-height: 40px;color: dodgerblue;}	
			
			#search{position: absolute; border: solid 1px dodgerblue;border-radius: 20px;width: 200px;left:950px;
			top: 100px;height: 40px;}
			
			#searchKey{outline: none; border: none; height: 40px;}
			
			.his div {float: left;}
			
			.his {width: 1680px;height: 150px;margin-top: 30px;}
			
			.hp {background-size: contain;width: 240px;height: 150px;position: relative;left: 600px;border-radius: 10px;cursor:pointer;}
			
			.hin {width: 600px; height: 149px; position: relative;left: 600px;margin-top:10px;margin-left: 20px;border-bottom: solid 1px gainsboro;}
			
			li {list-style: none;}
			
			a {text-decoration: none;color: black;font-weight: bold;}
			
			a:hover{color: deepskyblue;}
			#clear:hover{color: white;background: dodgerblue;}
			
			.delebutton {width: 34px;height: 30px;background-image: url(img/delebutton.jpg);
			float: left;position: relative;left: 600px;top: 60px;cursor:pointer;}
			
			.loading{width: 336px; height: 73px;background-image:url(img/loading.jpg); 
			background-size: contain;position: relative;left: 800px;margin-top:20px ;}
			
			#end{width: 1680px;height: 366px; background-image: url(img/end.jpg);background: contain no-repate;}
			
		</style>
	    <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>

	    <script type="text/javascript">
	    var page=1;
	    var sco=true;
	   
	    
	    
	    
	    
	    function initial(){
	    	sco=false;
	    	$.ajax({
	    		type:"post",
	    		url:"collection",
	    		dataType:"json",
	    		data:{
	    			method:"get"
	    		},
	    		success:function(data){
	    			var cont=$("<div class='cont' id='cont"+page+"'></div>");
	    			var line=$("<div class='line'></div>");
	    			cont.append(line);
	    			var ds=data.list
	    			for (var i = 0; i < ds.length; i++) {
	    				var d=ds[i];
	    				var hist=$("<div class='his' id='his"+d.cid+"'><div class='hp' style='background-image: url(img/"+d.img+");'></div><div class='hin'><a href='ShowRestaurant.html?rid="+d.rid+"' target=_parent>"+d.rname+"</a><br /><br /><br /><br /><br />"+d.ctime+"</div><div class='delebutton' ></div></div>");	    		       
	    				cont.append(hist);	      
	    			}
	    			line.css({height:ds.length*180+"px"});
	    			cont.css({height:ds.length*180+"px"});
	    			 $("body").append(cont);
	    			cont.append($("<div class='loading'></div>"));
	    			$(".loading").hide();
	    			page++;
	    			sco=true;
	    		}
	    	});	    	  
	    }
	    
	    function loadnext(){
	   
	    	sco=true;
	    	$.ajax({
	    		type:"post",
	    		url:"collection",
	    		dataType:"json",
	    		data:{
	    			method:"get",
	    			page:page
	    		},
	    		success:function(data){
	    			if(data.flag==200){
	    			var cont=$("<div class='cont' id='cont"+page+"'></div>");
	    			var line=$("<div class='line'></div>");
	    			cont.append(line);
	    			var ds=data.list
	    			for (var i = 0; i < ds.length; i++) {
	    				var d=ds[i];
	    				var hist=$("<div class='his' id='his"+d.cid+"'><div class='hp' style='background-image: url(img/"+d.img+");'></div><div class='hin'><a href='ShowRestaurant.html?rid="+d.rid+"' target=_parent>"+d.rname+"</a><br /><br /><br /><br /><br />"+d.ctime+"</div><div class='delebutton' ></div></div>");	    		       
	    				cont.append(hist);	      
	    			}
	    			 line.css({height:ds.length*180+"px"});
	    		
	    			 $("body").append(cont);
	    			cont.append($("<div class='loading'></div>"));
	    			$(".loading:not(:last)").remove();
	    			
	    			page=page+1;
	    			sco=true;
	    			}else{
	    				 var end=$("<div id='end'></div>");
	    				  $("body").append(end);
	    				  sco=false;
	    			}
	    			$(".loading").hide();
	    			
	    		}
	    	});	    	  
	    }
	    
	    //删除方法，传入历史记录id
	    function remove(rid,hid){
	    	
	    	$.ajax({
	    		type:"post",
	    		url:"collection",
	    		dataType:"json",
	    		data:{
	    			method:"remove",
	    			rid:rid
	    		},
	    		success:function(d){
	    			if(d.flag==200){
	    				var did="#his"+hid;
	    				$(did).hide();
	    				$(did).parent().children(':first-child').css("height",$(did).parent().css("height"));
	    			}
	    			if(hid==null){
	    				$(".cont").hide();
	    			}
	    		}
	    	});	
	    	
	    }
	    
	    

	    //监听滚动条刷新
	    window.onscroll = function(e) {
            var diff = document.body.offsetHeight - (window.innerHeight + document.documentElement.scrollTop || document.body.scrollTop );
           // console.log('距离底部:%d', diff);
            if (diff < 1 && sco==true) {
            	sco=false;
                console.log("到底了")
                //ajax
                 $(".loading").show();
                setTimeout("loadnext()",1000);              
            }
       }
	    //模糊查询
	    function search(){
	    		
	    		$(".cont").remove();
	    		var key=$("#searchKey").val();
	    		console.log(key);
	    		if(key==""){
	    			initial();
	    		}else{
	    			$("#end").remove();
	    			$.ajax({
			    		type:"post",
			    		url:"collection",
			    		dataType:"json",
			    		data:{
			    			method:"search",
			    			key:key
			    		},
			    		success:function(data){
			    			var cont=$("<div class='cont' id='cont"+page+"'></div>");
			    			var line=$("<div class='line'></div>");
			    			cont.append(line);
			    			var ds=data.list
			    			for (var i = 0; i < ds.length; i++) {
			    				var d=ds[i];
			    				var hist=$("<div class='his' id='his"+d.cid+"'><div class='hp' style='background-image: url(img/"+d.img+");'></div><div class='hin'><a href='ShowRestaurant.html?rid="+d.rid+"' target=_parent>"+d.rname+"</a><br /><br /><br /><br /><br />"+d.ctime+"</div><div class='delebutton' ></div></div>");	    		       
			    				cont.append(hist);	      
			    			}
			    			line.css({height:ds.length*180+"px"});
			    			 $("body").append(cont);
			    			 sco=false;
			    		}
			    	});	    	  
	    		}	 	
	    }
	    
	    //主方法
	    $(function(){ 
	    	
	    	initial();
            
	    	//删除方法
	    	$(document).on("click",".delebutton",function(){
	    		var href=$(this).prev().children().attr("href");
	    		var rid=href.substring(href.lastIndexOf("=")+1).trim();
	    		
	    		var did=$(this).parent().attr("id");
	    		var hid=did.substring(3);
	    		
	    		console.log("rid+"+rid);
	    		console.log("hid+"+hid);
	    		
	    		remove(rid,hid);
	    		
	    		
	    	});
	    	
	    	//删除全部方法
	    	$(document).on("click","#clear",function(){

	    		remove();	    		
	    	});
	    	
	    	//点击收藏跳转到指定店铺页
	    	
	    		
	    	$(document).on("click",".hp",function(){
	    		
	    		var href=$(this).next().children().attr("href");
	    		var rid=href.substring(href.lastIndexOf("=")+1).trim();
	    		console.log(rid);
	    		window.parent.location.href="ShowRestaurant.html?rid="+rid;
			});

    	
        });	
	    
	    
	    </script>
	</head>
	<body>
	     <div id="title"></div>
	     <div id="search"> &nbsp;&nbsp; <input type="search" onsearch="search()" id="searchKey"  placeholder="请输入搜索内容" /> </div>
		<div id="clear">清空收藏</div>
	
	</body>
</html>
